<template>
    <el-container>
        <el-main>
            <el-row style="text-align: center">
                <el-col>
                    <el-text style="font-size: 15px;">请将soul打开并进入聊天界面然后点击初始化</el-text>
                </el-col>
            </el-row>
            <el-row style="text-align: center">
                <el-col>
                    <el-text style="font-size: 15px">如果更改分辨率请重新初始化</el-text>
                </el-col>
            </el-row>
            <el-row style="display: flex;align-items: center;justify-content: center">
                <el-button type="primary" @click="init" :loading="initLoading" style="padding: 3px;font-size: 15px"
                           size="small" :disabled="initDisable">初始化
                </el-button>
            </el-row>
            <el-row v-for="(k, v) in defaultBtnMap" style="margin-top: 5px;line-height: 10px;text-align: center">
                <el-col>
                    <el-text type="danger">{{ k[0] }}:{{ k[1] }}</el-text>
                </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
                <el-col :span="2"></el-col>
                <el-col :span="20">
                    <el-input v-model="helloMsg" size="small" style="font-size: 14px">
                        <template #prepend>
                            <el-text>这样打招呼</el-text>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row>
                <el-col :span="2"></el-col>
                <el-col :span="20">
                    <el-input v-model="apiKey" size="small" style="font-size: 14px" @blur="setApiKey">
                        <template #prepend>
                            <el-text>这里apiKey</el-text>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row style="margin-top: 5px">
                <el-col :span="2"></el-col>
                <el-scrollbar height="335px" id="scrollbar" ref="scrollbar" style="width: 360px">
                    <el-text v-for="(log, index) in logList"
                             style="display: flex;max-width: 360px;border-bottom: 1px solid #909399;padding: 1px"
                             class="log_text">
                        <el-text style="color:red;width: 40px;">{{ log.split('---')[0] }}</el-text>
                        <el-text style="width: 320px">{{ log.split('---')[1] }}</el-text>
                    </el-text>
                </el-scrollbar>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row style="padding-top: 5px" v-loading="initLoading">
                <el-col :span="2"></el-col>
                <el-col :span="5">
                    <el-button style="padding: 3px;font-size: 15px;width: 100%" size="small" type="warning"
                               @click="startMatch" :disabled="matchDisable" :loading="matchLoading">开始匹配
                    </el-button>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="6">
                    <el-button style="padding: 3px;font-size: 15px;width: 100%" size="small" type="danger"
                               :disabled="autoDisable" @click="autoSelect">自动选择
                    </el-button>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="5">
                    <el-button style="padding: 3px;font-size: 15px;width: 100%" size="small" type="success"
                               :disabled="msgDisable" @click="startHandleMsg" :loading="handleMsgLoading">处理消息
                    </el-button>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row>
                <el-col :span="2"></el-col>
                <el-col :span="20">
                    <el-button style="padding: 3px;font-size: 15px;width: 100%" size="small" type="primary"
                               :disabled="stopDisable" @click="stop">停止
                    </el-button>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row style="margin-top: 5px">
                <el-col :span="2"></el-col>
                <el-text>1.开始匹配：进入匹配页面开始匹配直到次数用完</el-text>
            </el-row>
            <el-row>
                <el-col :span="2"></el-col>
                <el-text>2.处理消息：进入消息页面开始处理新消息</el-text>
            </el-row>
            <el-row>
                <el-col :span="2"></el-col>
                <el-text>3.自动选择：在1和2之间自动切换</el-text>
            </el-row>
        </el-main>
    </el-container>
</template>

<script lang="ts">
    import {HandleNewMsg, Init, SetApikey, StartMatch, StopHandleNewMsg, StopMatch} from "../../wailsjs/go/soul/Soul";
    import {ElMessage} from "element-plus";
    import {EventsOn} from "../../wailsjs/runtime";

    export default {
        name: 'HelloView',
        data() {
            return {
                text: 'hello',
                initLoading: false,
                matchLoading: false,
                handleMsgLoading: false,
                defaultBtnMap: new Map(),
                helloMsg: '你好啊这里是木木，有什么气都可以撒给我欧OVO木木绝对不会还口的',
                initDisable: false,
                matchDisable: false,
                autoDisable: false,
                msgDisable: false,
                stopDisable: false,
                apiKey: '',
                logList: []
            }
        },
        created() {
            this.appendLog()
        },
        methods: {
            setApiKey() {
                SetApikey(this.apiKey)
            },
            autoSelect() {
                ElMessage.error({message: '还没有做呢...'})
            },
            appendLog() {
                let that = this
                EventsOn('append_log', function (data) {
                    const now = new Date()
                    const hours = now.getHours()
                    const minutes = now.getMinutes()
                    that.logList.push(`${hours}:${minutes}---` + data)
                    switch (data) {
                        case 'cancel_match':
                            break
                    }
                    setTimeout(function () {
                        let nodes = document.getElementsByClassName("log_text")
                        let lastNode: Element
                        for (let i in nodes) {
                            if (typeof nodes[i].innerText === 'string') {
                                lastNode = nodes[i]
                            }
                        }
                        lastNode.scrollIntoView()
                    }, 500)
                })
            },
            btnDisable() {

            },
            async init() {
                this.initLoading = true
                let res = await Init()
                if (res === null) {
                    ElMessage.error({message: 'check place', showClose: true})
                    const now = new Date()
                    const hours = now.getHours()
                    const minutes = now.getMinutes()
                    this.logList.push(`${hours}:${minutes}---` + 'init failed: check place')
                    this.initLoading = false
                    return
                }
                this.defaultBtnMap = Object.keys(res).reduce((map, key) => {
                    map.set(key, res[key]);
                    return map;
                }, new Map());
                this.initLoading = false
            },
            async startMatch() {
                if (this.defaultBtnMap.size === 0) {
                    ElMessage.error({message: '请先初始化！'})
                    return
                }
                this.matchLoading = true
                let res = await StartMatch(this.helloMsg)
                this.matchLoading = false
                if (res.code !== 0) {
                    ElMessage.error({message: res.msg})
                    return
                }
            },
            async startHandleMsg() {
                if (this.defaultBtnMap.size === 0) {
                    ElMessage.error({message: '请先初始化！'})
                    return
                }
                this.handleMsgLoading = true
                let res = await HandleNewMsg()
                this.handleMsgLoading = false
                if (res.code !== 0) {
                    ElMessage.error({message: res.msg})
                    return
                }
            },
            async stop() {
                await StopHandleNewMsg()
                await StopMatch()
            }
        }
    }
</script>